{% extends 'front/base.html' %}

{% block title %}
  {{ user.username }}个人中心
{% endblock %}

{% block head %}
  <style>
  .profile-box{
    width: 400px;
    margin: 0 auto;
  }
  .avatar{
    width: 100px;
    width: 100px;
  }
  </style>
{% endblock %}

{% block body %}
  <div class="profile-box">
  <h1 style="text-align: center;">{{ user.username }}个人中心</h1>
    <form action="{{ url_for('user.edit_profile') }}" method="post" enctype="multipart/form-data">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <table class="table table-bordered mt-5">
        <tbody>
          <tr>
            <th width="100px">用户名：</th>
            <td>
              {% if is_mine %}
                <input type="text" name="username" value="{{ user.username }}">
              {% else %}
                {{ user.username }}
              {% endif %}
            </td>
          </tr>
          <tr>
            <th>头像：</th>
            <td>
              {% if user.avatar %}

                <img class="avatar" src="https://static.vecteezy.com/system/resources/previews/024/183/502/original/male-avatar-portrait-of-a-young-man-with-a-beard-illustration-of-male-character-in-modern-color-style-vector.jpg" alt="">
              {% endif %}
              {% if is_mine %}
                <input type="file" name="avatar" accept="image/jpeg, image/png" value="上传头像">
              {% endif %}
            </td>
          </tr>
          <tr>
            <th>签名：</th>
            <td>
              {% if is_mine %}
                <input type="text" name="signature" value="{{ user.signature or '' }}">
              {% else %}
                {{ user.signature or "" }}
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>
      {% if is_mine %}
        <div style="text-align: center;">
          <button class="btn btn-primary">保存</button>
        </div>
      {% endif %}
    </form>
  </div>
{% endblock %}